<template>
  <div style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;" class="dbStore">
    <el-button type="warning" class="buttonAdd button_add_zl" @click="copyDB">备份数据库</el-button>
    <div id="myProgress">
      <div id="myBar"></div>
    </div>
    <wh-table :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option"></wh-table>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import { formatDate } from '@/utils/formatDate'
  export default {
    name:'dbStore',
    components: {whTable},
    data(){
      return{
        tableData: [],
        tableHeader:[],
        tableLoading:true,
        option:{headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},
      }
    },
    mounted(){
      let self = this;
      self.getAllTableCount();
    },
    methods:{
      getAllTableCount(){
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/totalTable/queryTableCountList",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.tableLoading = false;
            self.tableHeader =  [{"columnName": "tName", "coloumNameCn": "表名"},
              {"columnName": "tNameCn", "coloumNameCn": "表中文名"},
              {"columnName": "tCount", "coloumNameCn": "表中数量"},
              {"columnName": "tStatus", "coloumNameCn": "表状态",tag:true}];
            self.tableData = resp.result;
          }
        });
      },
      copyDB(){
        let self = this;
        let elem = document.getElementById("myBar");
        let width = 10;
        let id=null;
        frame();
        self.$http({
          url: "/autoMonitor/totalTable/backUpDataBase",
          method: "post",
        }).then(resp => {
          if (resp.success) {
             id = setInterval(frame, 10);
          }else{
            self.$notify({
              title: '提示',
              message: '数据库备份出现异常',
              type:'error'
            });
          }
        });
        function frame() {
          if (width >= 100) {
            clearInterval(id);
          } else {
            width++;
            elem.style.width = width + '%';
            elem.innerHTML = width * 1  + '%';
          }
        }
      }
    }
  }
</script>
<style scoped>
  .dbStore .el-date-editor.el-input, .dbStore .el-date-editor.el-input__inner {
    width: auto;
  }
  .dbStore .buttonAdd{
    margin-bottom: 10px;
    padding: 7px 2px 7px 2px;
    margin-right: 5px;
    font-size: 12px;
    border-radius: 13px;
    /*background: #42b983;
    border: #42b983;*/
  }
  .el-input__inner{
    font-size: 12px;
  }
  #myProgress {
    width: 100%;
  }
  #myBar {
    width: 0;
    height: 30px;
    background-color: #67C23A;
    text-align: center;
    line-height: 30px;
    color: white;
  }
</style>
